<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改服务订单')" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: bootstrap-fileinput-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-serviceOrder-edit" th:object="${zsyhServiceOrderParts}">
        <input id="partsId" name="id" th:field="*{id}" type="hidden">
        <h5 id="partsOrderH" class="h5" style="margin: 15px 0 5px;color:#163091;border-bottom:1px solid #ddd;padding-bottom:5px;font-weight: bolder">>配件基本信息|工单单号--【<span style="color: red;cursor: pointer" onclick="viewOrderDetail()">[[${zsyhServiceOrderParts.orderId}]]</span>】</h5>
        <div id="partsOrderDiv" style="width: 100%;">
            <table id="bootstrap-table-parts" style="width: 100%"></table>
        </div>
        <div id="logis1" style="width: 30%;margin-top: 10px;float: left">
            <div >
                <label>寄件物流公司：<input style="border: 1px solid darkgray" id="logisticsId"  th:field="*{logisticsId}" type="text" readonly></label>
            </div>
            <div >
                <label>寄件物流单号：<input style="border: 1px solid darkgray" id="logisticsNumber" th:field="*{logisticsNumber}" type="text" readonly></label>
            </div>
            <div >
                <label>物流凭证：<a  href="javascript:void(0)" onclick="openAttributeImage()">查看</a> </label>
            </div>
        </div>
        <div id="logis2" style="margin-top: 10px;">
            <div style="">
                <label>返件物流公司：<input style="border: 1px solid darkgray" id="returnLogisticsId" th:field="*{returnLogisticsId}" type="text"></label>
            </div>
            <div style="">
                <label>返件物流单号：<input style="border: 1px solid darkgray" id="returnLogisticsNumber" th:field="*{returnLogisticsNumber}" type="text"></label>
            </div>
            <div >
                <label>物流凭证：<a  href="javascript:void(0)" onclick="openAttributeImage2()">查看</a> </label>
            </div>
        </div>

        <div style="height: 20px;"><p></p></div>
        <h5 id="partsRoadH" class="h5" style="margin: 15px 0 5px;color:#163091;border-bottom:1px solid #ddd;padding-bottom:5px;font-weight: bolder">>配件单跟踪记录</h5>
        <div style="display: flex">
            <div id="partsRoadDiv" style="width: 100%">
                <table id="bootstrap-table-road" style="width: 100%"></table>
            </div>
        </div>

        <div style="height: 20px;display: flex"><p></p></div>

        <h5 id="moneyOrderH" class="h5" style="margin: 15px 0 5px;color:#163091;border-bottom:1px solid #ddd;padding-bottom:5px;font-weight: bolder">>物流信息</h5>
        <p>寄件物流</p>
        <div style="display: flex">
            <div id="logisticsOrderDiv" style="width: 100%">
                <table id="bootstrap-table-logistics" style="width: 100%"></table>
            </div>
        </div>
        <p>返件物流</p>
        <div style="display: flex">
            <div id="logisticsOrderDiv2" style="width: 100%">
                <table id="bootstrap-table-logistics2" style="width: 100%"></table>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<th:block th:include="include :: bootstrap-fileinput-js"/>
<script th:inline="javascript">
    var prefix = ctx + "zsyh/serviceOrder";
    $("#form-serviceOrder-edit").validate({
        focusCleanup: true
    });

    var partsStateDatas = [[${@dict.getType('parts_state')}]];
    var isReturnDatas = [[${@dict.getType('zsyh_yesno')}]];
    var isSelfPartsDatas = [[${@dict.getType('zsyh_yesno')}]];
    var prefixPartsOrder = ctx + "zsyh/serviceOrderParts";
    $(function() {
        var options = {
            id: "bootstrap-table-parts",
            data: [[${zsyhServiceOrderParts.partsRelList}]],
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            pagination: false,
            paginationLoop: false,
            modalName: "售后配件信息",
            columns: [{
                field : 'Number',
                title : '序号',
                align: 'center',
                width: 20,
                formatter : function(value, row, index) {
                    var pageSize = $('#bootstrap-table-parts').bootstrapTable('getOptions').pageSize;//通过表的#id 可以得到每页多少条
                    var pageNumber = $('#bootstrap-table-parts').bootstrapTable('getOptions').pageNumber;//通过表的#id 可以得到当前第几页
                    return pageSize * (pageNumber - 1) + index + 1;//返回每条的序号： 每页条数 * （当前页 - 1 ）+ 序号
                }
            },
                {
                    field: 'id',
                    title: '自购配件id',
                    align: 'center',
                    visible: false
                },
                {
                    field: 'orderId',
                    title: '订单id',
                    align: 'center',
                    visible: false
                },
                {
                    field: 'partsName',
                    align: 'center',
                    title: '配件名称'
                },
                {
                    field: 'partsAttribute',
                    align: 'center',
                    title: '配件规格'
                },
                {
                    field: 'partsMoneyRepair',
                    align: 'center',
                    title: '自购配件 给师傅的钱'
                },
                {
                    field: 'partsMoneyFactory',
                    align: 'center',
                    title: '自购配件 收取厂家的钱'
                },
                {
                    field: 'partsNum',
                    align: 'center',
                    title: '故障配件数量'
                },
                {
                    field: 'isSelfParts',
                    align: 'center',
                    title: '是否自购件',
                    formatter: function(value, row, index) {
                        return $.table.selectDictLabel(isSelfPartsDatas, value);
                    }
                }]
        };
        $.table.init(options);
    });

    //工单跟踪记录
    var logTypeDatas = [[${@dict.getType('log_type')}]];
    $(function() {
        var options = {
            id: "bootstrap-table-road",
            data: [[${zsyhServiceOrderParts.partsLogList}]],
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            pagination: false,
            paginationLoop: false,
            modalName: "售后配件日志信息",
            columns: [{
                field : 'Number',
                title : '序号',
                align: 'center',
                width: 20,
                formatter : function(value, row, index) {
                    var pageSize = $('#bootstrap-table-road').bootstrapTable('getOptions').pageSize;//通过表的#id 可以得到每页多少条
                    var pageNumber = $('#bootstrap-table-road').bootstrapTable('getOptions').pageNumber;//通过表的#id 可以得到当前第几页
                    return pageSize * (pageNumber - 1) + index + 1;//返回每条的序号： 每页条数 * （当前页 - 1 ）+ 序号
                }
            },{
                field: 'createTime',
                align: 'center',
                title: '操作时间'
            },
                {
                    field: 'id',
                    title: '配件单操作记录id',
                    align: 'center',
                    visible: false
                },
                {
                    field: 'logType',
                    align: 'center',
                    title: '操作分类',
                    formatter: function(value, row, index) {
                        return $.table.selectDictLabel(logTypeDatas, value);
                    }
                },
                {
                    field: 'logContent',
                    title: '内容描述'
                }
            ]
        };
        $.table.init(options);
    });

    var prefix = ctx + "zsyh/serviceOrderParts";
    //物流信息
    $(function() {
        var options = {
            id: "bootstrap-table-logistics",
            url: prefix + "/getLogisticsList?logId="+$("#logisticsId").val()+"&logNumber="+$("#logisticsNumber").val(),
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            pagination: false,
            paginationLoop: false,
            firstLoad: false,
            modalName: "物流信息查询",
            columns: [{
                field : 'Number',
                title : '序号',
                align: 'center',
                width: 20,
                formatter : function(value, row, index) {
                    var pageSize = $('#bootstrap-table-road').bootstrapTable('getOptions').pageSize;//通过表的#id 可以得到每页多少条
                    var pageNumber = $('#bootstrap-table-road').bootstrapTable('getOptions').pageNumber;//通过表的#id 可以得到当前第几页
                    return pageSize * (pageNumber - 1) + index + 1;//返回每条的序号： 每页条数 * （当前页 - 1 ）+ 序号
                }
            },{
                field: 'ftime',
                align: 'center',
                title: '时间'
            },
            {
                field: 'context',
                align: 'center',
                title: '内容描述'
            }
            ]
        };
        $.table.init(options);
    });

    $(function() {
        var options = {
            id: "bootstrap-table-logistics2",
            url: prefix + "/getLogisticsList?logId="+$("#returnLogisticsId").val()+"&logNumber="+$("#returnLogisticsNumber").val(),
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            pagination: false,
            paginationLoop: false,
            firstLoad: false,
            modalName: "物流信息查询",
            columns: [{
                field : 'Number',
                title : '序号',
                align: 'center',
                width: 20,
                formatter : function(value, row, index) {
                    var pageSize = $('#bootstrap-table-road').bootstrapTable('getOptions').pageSize;//通过表的#id 可以得到每页多少条
                    var pageNumber = $('#bootstrap-table-road').bootstrapTable('getOptions').pageNumber;//通过表的#id 可以得到当前第几页
                    return pageSize * (pageNumber - 1) + index + 1;//返回每条的序号： 每页条数 * （当前页 - 1 ）+ 序号
                }
            },{
                field: 'ftime',
                align: 'center',
                title: '时间'
            },
                {
                    field: 'context',
                    align: 'center',
                    title: '内容描述'
                }
            ]
        };
        $.table.init(options);
    });


    function openAttributeImage(attributeImage) {
        $.modal.open("查看图片", attributeImage);
    }

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/edit", $('#form-serviceOrder-edit').serialize());
        }
    }

    $(".file-upload").each(function (i) {
        debugger;
        var val = $("input[name='" + this.id + "']").val();
        var imageArr = val.split("|");
        $(this).fileinput({
            'uploadUrl': ctx + 'common/uploadOSS',
            initialPreviewAsData: true,
            initialPreview: imageArr,
            maxFileCount: 1,
            showRemove: false,/*是否显示移除按钮*/
            showUpload: false,/*是否显示上传按钮*/
            showBrowse: false,/*是否显示浏览按钮,选择按钮*/
            showCaption: false, /*是否显示被选文件的简介*/
            autoReplace: true,
            layoutTemplates: {
                actionDelete:'',
                actionUpload:''
            } /*去掉缩略图上的删除和上传按钮*/
        }).on('fileuploaded', function (event, data, previewId, index) {
            $("input[name='" + event.currentTarget.id + "']").val(data.response.url)
        }).on('fileremoved', function (event, id, index) {
            $("input[name='" + event.currentTarget.id + "']").val('')
        })
        $(this).fileinput('_initFileActions');

    });

    $(function () {
        $('#orderState').attr("disabled",true);
        $('#isPriority').attr("disabled",true);
    })

    $(document).ready(function () {
        //判断单号是否存在，是否有物流信息
        $.ajax({
            url: prefix + "/isLogistics",
            type: "post",
            data: {
                "orderPartsId": $("#partsId").val(),
                "type": "1"
            },
            success: function(result) {
                debugger;
                if(result.msg == "ok"){
                    $("#logisticsOrderDiv").css("display","block");
                    $("#logis1").css("display","block");
                    $("#bootstrap-table-logistics").bootstrapTable('refresh');
                }else{
                    $("#logisticsOrderDiv").css("display","none");
                    $("#logis1").css("display","none");
                    $.modal.alertWarning(result.msg);
                }
            }
        })

        $.ajax({
            url: prefix + "/isLogistics",
            type: "post",
            data: {
                "orderPartsId": $("#partsId").val(),
                "type": "2"
            },
            success: function(result) {
                debugger;
                if(result.msg == "ok"){
                    $("#logisticsOrderDiv2").css("display","block");
                    $("#logis2").css("display","block");
                    $("#returnLogisticsProof").attr("src",[[${zsyhServiceOrderParts.returnLogisticsProof}]]);
                    $("#bootstrap-table-logistics2").bootstrapTable('refresh');
                }else{
                    $("#logisticsOrderDiv2").css("display","none");
                    $("#logis2").css("display","none");
                    $.modal.alertWarning(result.msg);
                }
            }
        })
    });

    function viewOrderDetail() {
        $.modal.openTab("查看工单详情",ctx + "zsyh/serviceOrder/edit/"+[[${zsyhServiceOrderParts.orderId}]]+"/2");
    }

    function openAttributeImage() {
        $.modal.open("查看图片", [[${zsyhServiceOrderParts.logisticsProof}]]);
    }

    function openAttributeImage2() {
        $.modal.open("查看图片", [[${zsyhServiceOrderParts.returnLogisticsProof}]]);
    }

</script>
</body>
</html>